<script setup>
    const props = defineProps({
        background: {
            type: String,
            required: true,
        },
    })
</script>

<template>
    <div :style="`background-image: url(${background})`" class="common-layout">
        <el-container>
            <el-header class="header"></el-header>
            <el-container>
                <el-aside width="50%">
                    <div class="title">IMPLEO</div>
                    <div class="sub-title">C любовью и заботой о Вашем ментальном здоровье! Это платформа №1 по поиску специалистов в области психологии. Здесь стоимость начинается от 700 рублей</div>
                </el-aside>
                <el-main>
                    <div class="content-button">
                        <button>Психологи</button>
                        <button>Коучи</button>
                        <button>Тетапрактики</button>
                        <button>Астрологи</button>
                    </div>
                </el-main>
            </el-container>
            <el-footer class="footer">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <button class="impler">Я специалист</button>
                    </el-col>
                    <el-col :span="12">
                        <button class="user">Ищу специалиста</button>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</template>

<style lang="sass" scoped>
@import '../assets/styles/main'

button
    background: $blue_light
    color: $white
    border: none
    width: 100%
button:hover
    background: $blue_none

.common-layout
    margin-top: -7em
    background-repeat: no-repeat
    background-size: cover
    background-position-y: bottom
    padding-left: 1em
    padding-right: 1em
.header
    padding-top: 12em
.footer
    height: auto
    
.impler
    background: $black
    color: $white
.user
    background: $blue_m
    color: $white
</style>